Skip to main content

기본 타입

Type

값으로 할 수 있는 일의 집합

타입과 서브 타입

타입서브타입
Boolean불 리터럴
bigint큰 정수 리터럴
number숫자 리터럴
string문자열 리터럴
symbolunique symbol
object객체 리터럴
Array튜플
enumconst enum

number

const num: number = 1;

string

const str: string = 'Hello';

boolean

const bool: boolean = false;

undefined

let age = number | undefined;
  • 보통 undefined은 다른 타입과 함께 쓴다.

null

let person: string | null;
  • 보통 null은 다른 타입과 함께 쓴다.

any

let anything: any = 0;
anything = 'hello';
anything = 'true';
  • any 타입으로 뭐든지 할 수 있지만 꼭 필요한 상황이 아니라면 사용하지 않는 것이 좋다.
  • any는 모든 값의 집합이며 any를 사용하면 값이 자바스크립트처럼 동작하기 시작하면서 타입 검사기가 작동하지 않게 된다.

unknown

let a: unknown = 30; // unknown
let b = a === 123; // boolean
let c = a + 10; // 에러 발생
if (typeof a === 'number') {
// 타입 검사
let d = a + 10; // number
}
  • 타입을 미리 알 수 없는 어떤 값이 있을 때 any 대신 unknwon 타입을 사용하는 것이 좋다.
  • unknown 타입은 타입을 검사해 정제하기 전까지는 타입스크립트가 unknown 타입의 값을 사용할 수 없도록 강제한다.
  • 너무 추상적이라 가능한한 사용하지 않는 것을 권장한다.

타입 별칭

let, const, var 등으로 변수를 선언해서 값 대신 변수로 칭하듯 타입 별칭으로 타입을 가리킬 수 있다.

type Age = number;
type Person = {
name: string;
age: Age;
};

타입 별칭을 이용하면 형태를 조금 더 이해하기 쉽게 정의할 수 있다.

타입스크립트는 별칭을 추론하지는 않으므로 반드시 별칭의 타입을 명시적으로 정의해야 한다.

자바스크립트의 변수와 마찬가지로 하나의 타입을 두 번 정의할 수는 없다.

type Color = 'red';
type Color = 'blue'; // 에러 발생, 식별자를 중복 정의

타입 별칭도 블록 영역에 적용된다.

모든 블록과 함수는 자신만의 영역을 가지므로 내부에 정의한 타입 별칭이 외부의 정의를 덮어쓴다.

type Color = 'red';
let x = Math.random() < 5;

if (x) {
type Color = 'blue'; // 위의 Color 정의를 덮어씀
let b: Color = 'blue';
} else {
let c: Color = 'red';
}

null, undefined, void, never

타입의미
null값이 없음
undefined아직 값을 변수에 할당하지 않음
voidreturn문을 포함하지 않는 함수
never절대 반환하지 않는 함수

열거형 (enum)

enum은 해당 타입으로 사용할 수 있는 값을 열거하는 기법이다.

열거형은 키를 값에 할당하는 순서가 없는 자료구조이다.

키가 컴파일 타입에 고정된 객체라고 생각하면 쉬우며

타입스크립트는 키에 접근할 때 주어진 키가 실제 존재하는지 확인할 수 있다.

문자열에서 문자열로 매핑

enum Language {
English, // [0]
Spanish, // [1]
Russian, // [2]
}

문자열에서 숫자로 매핑

enum Language {
English = 3, // [3]
Spanish = 5, // [5]
Russian, // [6]
}

enum에서 값을 가져올 때 점 또는 괄호 표기법으로 열거형 값에 접근할 수 있다.

let myFirstLanguage = Language.Russian; // 점 표기법
let mySecondLanguage = Language['English']; // 괄호 표기법

열거형 멤버에 명시적으로 값을 할당하기 (열거형 합치기)

enum Language {
English = 0,
Spanish = 1,
}

enum Language {
Russian = 3, // Language = [English = 0, Spanish = 1, Russian = 3]
}

계산된 값을 사용하여 타입을 추론시킬 수도 있다.

enum Language {
English = 100,
Spanish = 200 + 300,
Russian, // 타입스크립트가 500 다음 501 숫자로 추론
}

열거형에 문자열 값이나 문자열과 숫자를 혼합할 수 있다.

enum Color {
Red = '#c10000',
Blue = '#007ac1',
Pink = 0xc10050,
White = 255,
}

let red = Color.Red; // '#c10000'
let pink = Color.Pink; // 0xc10050

타입스크립트에서는 값이나 키로 열거형에 접근할 수 있도록 허용하지만 이는 불안정한 결과를 초래하기 쉬우며

안전하게 const enum을 이용하면 타입스크립트가 안전하지 않은 작업을 막도록 만들 수 있다.

cosnt enum Language {
English,
Spanish,
Russian
}

// 유효한 enum 키 접근
let a = Language.English // Language

// 유효하지 않은 enum 키 접근
let b = Language.Tagalog // 에러 발생, 접근 불가능
let c = Language[0] // 접근 불가능

const enum은 문자열 값을 갖는 열거형을 사용해야 한다.

const enum의 사용 방법 예시

const enum Flippable {
Burger,
Chair,
Cup,
Skateboard,
Table,
}

function flip(f: Flippable) {
return 'flippable it';
}

flip(Flippable.Chair); // 'flippable it'
flip(Flippable, Cup); // 'flippable it'
flip('Hat'); // 에러 발생
flip(12); // 에러 발생